<template>
  <el-card shadow="hover">
    <div class="content">
      <el-table :data="filterTableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30"/>
        <el-table-column label="ID" prop="id" width="60"/>
        <el-table-column label="用户名" prop="user_name"  width="120" />
        <el-table-column label="昵称" prop="nick_name" width="100"/>
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="手机号" prop="phone"  width="120" />
        <el-table-column label="性别" prop="gender" width="70">
        </el-table-column>
        <el-table-column align="right" width="200">
          <template #header>
          <div class="function-header">
          <el-input v-model="table.search" size="small" placeholder="Type to search" style="width: 200px;"/>
          <!-- <el-button size="small" type="danger" @click="handleDelete()">批量删除</el-button> -->
          </div>
          </template>
          <template #default="scope">
          <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="currentChangeHandle"
      layout="prev, pager, next" :total="table.total" :default-page-size="table.pageSize"/>
    </div>
  </el-card>
</template>


<script>
import { getUserList, deleteUser } from '@/api/user'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      table: { data: [], search: '', total: 10, pageSize: 6, multipleSelection: [] },
    }
  },
  mounted() {
    this.getTableData()
  },
  computed: {
    filterTableData() {
      const search = this.table.search
      return this.table.data.filter(
        (data) => !search || data.user_name.toLowerCase().includes(search.toLowerCase())
      )
    },
  },
  methods: {
    getTableData: function(params) {
      getUserList().then(resp => {
        this.$set(this.table, 'data', resp.data)
      })
    },
    currentChangeHandle: function(value) {
      getTableData({current_page: value, page_size: table.pageSize}) 
    },
    // 多选内容选中改变时的处理函数
    handleSelectionChange: function(val) {
      this.table.multipleSelection = val
    },
    handleEdit: function(index, row) {
      console.log(index, row)
    },
    handleDelete: function(_, row) {
      console.log(row)
      deleteUser({ id: row.id }).then(reps => {
        Message.success(reps.message)
        this.getTableData()
      })
    }
  },
}
</script>

<style lang="scss">
.el-card {
  height: 96%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    .el-pagination {
      margin: 20px auto;
    }
  }
}
.function-header {
  display: flex;
  justify-content: space-between;
  .el-input {
    width: 100px;
  }
}
</style>